<template>
	<view class="databoard">
		<!-- 数据统计 -->
		<view class="stats" :class="[item.classname]" v-for="(item,index) in stats" :key="index">
			<view class="stats-head">
				<view class="stats-title">
					<view class="stats-title-icon"></view>
					<view class="stats-title-text">{{item.title}}</view>
				</view>
				<view class="stats-link" @click="navigateTo(item.link)">
					查看更多
					<view class="stats-link-arrow"></view>
				</view>
			</view>
			<view class="stats-body">
				<view class="stats-item">
					<view class="stats-title">订单数量</view>
					<view class="stats-value">{{item.orderTotal}}</view>
				</view>
				<view class="stats-item">
					<view class="stats-title">订单金额(元)</view>
					<view class="stats-value">{{item.amountTotal}}</view>
				</view>
			</view>
		</view>
		<!-- 销量预警 -->
		<view class="sales-warning">
			<view class="sales-warning-title">销量排行</view>
			<view class="sales-table">
				<!-- <view class="tab-nav">
					<view class="tn" :class="{active:salesCurrent === item.value}" v-for="item in salesTab" :key="item.value" @click="changeSalesCurrent(item.value)">{{item.title}}</view>
				</view> -->
				<view class="thead">
					<view class="th">名称</view>
					<view class="th">负责人</view>
					<view class="th">订单</view>
				</view>
				<view class="tbody" v-if="salesList.length > 0"  v-for="(item,index) in salesList[salesCurrent]" :key="item.index">
					<view class="tr">
						<view class="td">{{item.site_name || item.fenxiao_name}}</view>
						<view class="td">{{item.website_name}}</view>
						<view class="td">{{item.num}}</view>
					</view>
				</view>
				<ns-empty v-else text="暂无销量排行信息" :fixed="!1" :isIndex="!1"></ns-empty>
			</view>
		</view>
		<bussiness-tab current="databoard"></bussiness-tab>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import bussinessTab from './components/bussiness-tab.vue' 
	export default {
		components:{
			bussinessTab
		},
		data() {
			return {
				stats: {
					merchants: {
						title: '今日商家订单',
						orderTotal: '0',
						amountTotal: '0.00',
						link: './orders?role=merchant',
						classname: 'merchants'
					},
					// teamleader: {
					// 	title: '今日团长订单',
					// 	orderTotal: '',
					// 	amountTotal: '',
					// 	link: './orders?role=teamleader',
					// 	classname: 'teamleader'
					// },
					// promoters: {
					// 	title: '今日店主订单',
					// 	orderTotal: '0',
					// 	amountTotal: '0.00',
					// 	link: './orders?role=promoters',
					// 	classname: 'promoters'
					// }
				},
				salesTab:[{
					title:'商家',
					value:'0'
				}
				,{
					title:'店主',
					value:'1'
				}
				],
				salesCurrent:'0',
				salesList: []
			}
		},
		methods: {
			changeSalesCurrent(value){
				this.salesCurrent = value;
			},
			navigateTo(url){
				uni.navigateTo({
					url
				})
			},
			dataPanel() {
				this.$api.sendRequest({
					url: '/city/api/index/dataPanel',
					success: res => {
						let data = res.data;
						this.stats.merchants.orderTotal = data.shop_order_count;
						this.stats.merchants.amountTotal = data.shop_money_sum;
						// this.stats.promoters.orderTotal = data.fenxiao_order_count;
						// this.stats.promoters.amountTotal = data.fenxiao_money_sum;
						this.salesList = [data.shopList,data.fenxiaoList];
						console.log(this.salesList)
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			}
		},
		onLoad() {
			this.dataPanel();
		}
	}
</script>

<style lang="scss" scoped>
	@import '../common/css/mixins.scss';
	$colorGray:#909399;

	.databoard {
		padding-bottom: 200rpx;
	}

	.stats {
		margin: 30rpx;
		width: 690rpx;
		border-radius: 8rpx;
		background-color: #fff;

		.stats-head {
			@include flex(space-between);
			padding: 0 30rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #FFEADB 0%, #FFFFFF 100%);

			.stats-title {
				@include flex(flex-start);

				.stats-title-icon {
					margin-right: 17rpx;
					width: 32rpx;
					height: 32rpx;
					@include image('business/databoard-store.png');
				}

				.stats-title-text {
					font-size: 32rpx;
					color: #000000;
					line-height: 45rpx;
				}
			}

			.stats-link {
				@include flex(flex-end);
				font-size: 24rpx;
				color: #606266;
				line-height: 46rpx;

				.stats-link-arrow {
					width: 32rpx;
					height: 32rpx;
					@include image('icon-link-arrow.png');
				}
			}
		}

		.stats-body {
			@include flex(space-between);
			padding: 40rpx 0;

			.stats-item {
				width: 50%;
				@include flex;
				flex-direction: column;

				.stats-title {
					font-size: 24rpx;
					color: #909399;
					line-height: 33rpx;
				}

				.stats-value {
					font-size: 48rpx;
					color: #303133;
					line-height: 67rpx;
				}
			}
		}

		&.teamleader {
			.stats-head {
				background: linear-gradient(90deg, #FFEDED 0%, #FFFFFF 100%);
				.stats-title-icon {
					@include image('business/databoard-teamleader.png');
				}
			}
		}

		&.promoters {
			.stats-head {
				background: linear-gradient(90deg, #E5FAF6 0%, #FFFFFF 100%);
				.stats-title-icon {
					@include image('business/databoard-promoters.png');
				}
			}
		}
	}

	.sales-warning {
		margin: 0 30rpx;
		.sales-warning-title {
			margin: 30rpx 0;
			font-size: 32rpx;
			color: #000000;
			line-height: 45rpx;
		}

		.sales-table {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 8rpx;

			.tn,
			.th,
			.td {
				width: 230rpx;
				@include flex;
			}

			.tab-nav,
			.thead,
			.tr {
				@include flex;
			}

			.tab-nav {
				height: 88rpx;

				.tn {
					width: 50%;
					height: 100%;
					font-size: 28rpx;
					color: $colorGray;
					line-height: 40rpx;
					background: #EFEFEF;

					&.active {
						color: #000;
						background-color: #fff;
					}
				}
			}

			.thead {
				height: 77rpx;

				.th {
					height: 100%;
					font-size: 24rpx;
					color: $colorGray;
					line-height: 33rpx;
				}
			}

			.tbody {
				.tr {
					padding: 20rpx;

					background: rgba(255, 69, 68, 0.04);

					&:nth-child(2n) {
						background-color: #fff;
					}

					.td {
						height: 100%;
						font-size: 28rpx;
						color: #303133;
						line-height: 40rpx;

						&:nth-child(3) {
							color: #FF4544;
						}
					}
				}
			}
		}
	}
</style>
